<template>
  <custom-modal-page :visible.sync="visible">
    <div class="flow-config-container">
      <div class="screen-conditions-container">
        <ScreenConditions :isDataType="false">
          <template slot="conditions">
            <a-select
              showSearch
              @change="handleChange"
              v-model="beamType"
              placeholder="请选择梁类型"
            >
              <a-select-option
                :value="item.dicValue"
                v-for="(item, index) in beamTypeSource"
                :key="index"
              >
                {{ item.dicDesc }}
              </a-select-option>
            </a-select>
          </template>
          <template slot="operate">
            <a-button class="back-button" @click="goBack()"> 返回 </a-button>
          </template>
        </ScreenConditions>
      </div>
      <div class="header" header="流程配置"></div>
      <div class="main" v-loading="loading">
        <vxe-table
          ref="xTable"
          height="99%"
          class="scrollbarStyle"
          align="center"
          show-overflow
          show-header-overflow
          :data="tableData"
          :column-config="{ resizable: true }"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="taskNodeDesc" title="流程名称"> </vxe-column>
          <vxe-column field="taskNodeUsername" title="流程权限配置人员">
          </vxe-column>
          <vxe-column field="operate" title="操作" width="120" fixed="right">
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button type="link" @click="config(row)"> 配置 </a-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 配置弹窗 -->
    <configModal
      :visible.sync="configVisible"
      :row="params"
      @updateData="getTableData()"
    ></configModal>
  </custom-modal-page>
</template>

<script>
import bjSelect from "@/components/bj-select";
import configModal from "./configModal";
import { getDickeyList } from "@/api/common";
import { getNodeList } from "@/api/wisdom-beam/quality-app";
export default {
  name: "flowConfig",
  components: {
    bjSelect,
    configModal,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getBeamType();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      tableData: [],
      loading: false,
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      //配置弹窗
      configVisible: false,
      params: {},
      //梁类型
      beamTypeLoading: false,
      beamTypeSource: [],
      beamType: undefined,
    };
  },
  methods: {
    handleChange() {
      this.pager.page = 1;
      this.getTableData();
    },
    //查询梁类型
    getBeamType() {
      this.beamTypeLoading = true;
      return new Promise((resolve, reject) => {
        getDickeyList({ dictKey: "TASK_MANAGER_TYPE" })
          .then((res) => {
            let { data } = res;
            this.beamTypeSource = data?.result ?? [];
            this.beamType = this.beamTypeSource?.[0]?.dicValue;
            this.getTableData();
            resolve();
          })
          .catch((_) => {
            this.beamTypeSource = [];
            this.beamType = undefined;
            reject();
          })
          .finally((_) => {
            this.beamTypeLoading = false;
          });
      });
    },

    //查询列表
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      return new Promise((resolve, reject) => {
        getNodeList({
          page,
          pageSize,
          beamType: this.beamType,
        })
          .then((res) => {
            let {
              data: { result },
            } = res;
            this.tableData = result?.rows || [];
            this.pager.total = result?.total || 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //配置
    config(row = {}) {
      this.params = row;
      this.configVisible = true;
    },
    //返回
    goBack() {
      this.$emit("update:visible", false);
    },
    //监听分页
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
  },
};
</script>

<style lang="less" scoped>
.flow-config-container {
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px 10px 10px;
  .flex();
  flex-direction: column;
  .screen-conditions-container {
    margin-bottom: 10px;
    .back-button {
      color: var(--primary-color);
      background: #f1f2f7 !important;
      border: none;
      position: absolute;
      right: 20px;
    }
  }
  .header {
    padding: 28px 20px;
    background-color: #fff;
    box-sizing: border-box;
    .flex();
    justify-content: space-between;
    align-items: center;
    &::before {
      content: attr(header);
      height: 18px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #525a5d;
      line-height: 18px;
    }
  }
  .main {
    background-color: #fff;
    flex: 1;
    height: 100%;
  }
  .pager-container {
    flex-shrink: 0;
  }
}
</style>
